import React, { useState } from 'react';
import { Button } from './ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { Badge } from './ui/badge';
import { Languages, Check, Globe } from 'lucide-react';
import { motion } from 'motion/react';
import { useLanguage, Language, languages } from '../contexts/LanguageContext';

export function LanguageSelector() {
  const { currentLanguage, setLanguage, t } = useLanguage();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
      <DropdownMenuTrigger asChild>
        <motion.div
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <Button
            variant="ghost"
            size="sm"
            className="flex items-center gap-2 h-8 px-3 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200"
          >
            <Globe className="w-4 h-4 flex-shrink-0" />
            <span className="hidden sm:inline leading-none">
              {languages[currentLanguage].flag} {languages[currentLanguage].nativeName}
            </span>
            <span className="sm:hidden leading-none">
              {languages[currentLanguage].flag}
            </span>
          </Button>
        </motion.div>
      </DropdownMenuTrigger>
      <DropdownMenuContent 
        align="end" 
        className="w-64 p-2 bg-white/95 backdrop-blur-xl border-slate-200 shadow-lg"
      >
        <div className="px-3 py-2 border-b border-slate-100 mb-2">
          <p className="text-sm font-medium text-slate-700">{t('language.select')}</p>
          <p className="text-xs text-slate-500">{t('language.current')}: {languages[currentLanguage].name}</p>
        </div>
        
        {Object.entries(languages).map(([code, lang]) => (
          <DropdownMenuItem
            key={code}
            onClick={() => {
              setLanguage(code as Language);
              setIsOpen(false);
            }}
            className="flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-slate-50 rounded-lg transition-colors"
          >
            <div className="flex items-center gap-3">
              <span className="text-lg">{lang.flag}</span>
              <div>
                <div className="text-sm font-medium text-slate-700">
                  {lang.nativeName}
                </div>
                <div className="text-xs text-slate-500">
                  {lang.name}
                </div>
              </div>
            </div>
            
            {currentLanguage === code && (
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.2 }}
              >
                <Badge 
                  variant="secondary" 
                  className="bg-blue-100 text-blue-700 border-blue-200 h-5 px-2"
                >
                  <Check className="w-3 h-3" />
                </Badge>
              </motion.div>
            )}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}